import React from 'react'
import { useNavigate, Navigate } from 'react-router-dom'
import { Form, Input, Button, message } from 'antd'
import './login.css'
import { getMenu } from '../../api'
const Login = () => {
    const navigate = useNavigate()
    // 在登录状态下需要跳转home
    if(localStorage.getItem('react-app-token')) {
        return <Navigate to={"/home"} replace />
    }
    const handleSubmit = val =>{
        if(!val.password || !val.username) {
            return message.warning('请输入账号或者密码')
        }
        getMenu(val).then(({data}) => {
            if(data.code === 20000) {
              localStorage.setItem('react-app-token',data.data.token)
                navigate('/home')
            } else {
                message.error(data.data.message)
            }
        })
    }
    return (
        <Form className="login-container" onFinish={handleSubmit}>
           <div className="login_title">系统登录</div>
            <Form.Item label="账号" name="username">
                <Input placeholder="请输入账号" />
            </Form.Item>
            <Form.Item label="密码" name="password">
                <Input.Password placeholder="请输入密码" />
            </Form.Item>
            <Form.Item className="login-button">
                <Button type="primary" htmlType="submit">登录</Button>
            </Form.Item>
        </Form>
    )
}

export default Login
